<template>
  <section v-if="name === 'billContent'"
           :class="classFlag">
    <span class="shipment-sender-info">
      <p>
        {{ row.transportModeDesc }} | {{ row.shipModeDesc }} {{additionalLabelArr ? ' | ' + additionalLabelArr : additionalLabelArr}}
        <br />
        <span v-if="row.waybillCache">
          <span v-if="row.waybillCache.totalWeight">{{ row.waybillCache.totalWeight }}公斤</span>
          <span v-if="row.waybillCache.totalVolume"> | {{ row.waybillCache.totalVolume }}方</span>
          <span v-if="row.waybillCache.totalQuantity"> | {{ row.waybillCache.totalQuantity }}件</span>
        </span>
      </p>
    </span>
  </section>
  <section v-else-if="name === 'billWayinfo'"
           :class="classFlag">
    <span class="shipment-sender-info">
      <p>
        {{ row.transportModeDesc }} {{ row.shipModeDesc ? ' | ' +   row.shipModeDesc : null}} {{additionalLabelArr ? ' | ' + additionalLabelArr : additionalLabelArr}}
        <br />
        <span v-if="row.waybillCache">
          <span v-if="row.waybillCache.totalWeight">{{ row.waybillCache.totalWeight}}公斤</span>
          <span v-if="row.waybillCache.totalVolume"> | {{ row.waybillCache.totalVolume }}方</span>
          <span v-if="row.waybillCache.totalQuantity"> | {{ row.waybillCache.totalQuantity }}件</span>
        </span>
      </p>
    </span>
  </section>
  <section v-else-if="name === 'billTotal'">
    {{ row.totalWeight || 0 }}公斤 | {{ row.totalVolume || 0 }}方 | {{ row.totalQuantity || 0 }}件
  </section>
  <!-- 合单报价下的运单详情 -->
  <section v-else-if="name === 'oneBillWayinfo'"
           class="shipment-sender-info">
    <p>
      {{transportRequirement.transportModeDesc}} | {{transportRequirement.shipModeDesc}} {{additionalLabelArr ? ' | ' + additionalLabelArr : additionalLabelArr}}
      <br>
      {{row.calculateWeight || 0}}公斤 | {{row.calculateVolume || 0}}方 | {{row.totalQuantity || 0}}件
    </p>
  </section>
  <section v-else-if="name==='orderList'"
           class="shipment-sender-info">
    <p>
      {{row.transportModeName}} | {{row.distanceTypeName}} {{additionalLabelArr ? ' | ' + additionalLabelArr : additionalLabelArr}}
      <br v-if="row.calculateWeight || row.calculateVolume || row.totalQuantity" />
      {{Number(row.calculateWeight).toFixed(2)}}公斤 | {{Number(row.calculateVolume).toFixed(2)}}方 | {{row.totalQuantity}}件
    </p>
  </section>
  <section v-else-if="name==='orderImport' && row"
           class="shipment-sender-info">
    <p>
      {{row.transportMode}}
      {{row.deliver === '是'?'| 送货':''}}
      {{row.pick === '是'?'| 提货':''}}
      {{row.unload === '是'?'| 卸货':''}}
      {{row.load === '是'?'| 装货':''}}
      {{row.insure === '保价'?'| 保价':''}}
      <br />
      {{row.totalWeight || 0}}公斤 | {{row.totalVolume || 0}}方 | {{row.totalQuantity || 0}}件
    </p>
  </section>
  <section v-else
           class="shipment-sender-info">
    <p>
      {{row.transportModeDesc}} | {{row.shipModeDesc}} {{additionalLabelArr ? ' | ' + additionalLabelArr : additionalLabelArr}}
      <br v-if="row.calculateWeight || row.calculateVolume || row.totalQuantity" />
      {{Number(row.calculateWeight).toFixed(2)}}公斤 | {{Number(row.calculateVolume).toFixed(2)}}方 | {{row.totalQuantity}}件
    </p>
  </section>
</template>

<script>
export default {
  name: "OrderInfo",
  props: {
    row: {
      type: Object,
      default: () => { }
    },
    name: {
      type: String
    },
    classFlag: {
      type: String,
      default: ""
    }
  },
  computed: {
    transportRequirement () {
      return this.row?.transportRequirement;
    },
    additional () {
      return ['pick', 'deliver', 'onLoad', 'load', 'offLoad', 'unload', 'insure']
    },
    additionalLabel () {
      return {
        pick: "提货",
        deliver: "送货",
        onLoad: "装货", load: "装货",
        offLoad: "卸货", unload: "卸货",
        insure: "保价"
      }
    },
    additionalLabelArr () {
      let arr = [];
      let data = this.name === 'oneBillWayinfo' ? this.transportRequirement : this.row;
      for (let key in data) {
        if (this.additional.includes(key) && data[key]) {
          arr.push(this.additionalLabel[key])
        }
      }
      return arr.length ? arr.toString().replaceAll(',', ' | ') : null;
    }
  }
};
</script>
<style scoped>
.section-wrap {
  width: 100%;
  display: -webkit-box;
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  /* white-space: pre-line; */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.shipment-sender-info p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.red {
  width: 100%;
  display: -webkit-box;
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  /* white-space: pre-line; */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: var(--prev-color-text-red);
}
</style>
